<template>
  <div class="orderGoods">
    <div class="orderGoods_title clearfix">
      <ul ref="title_tab">
        <li class="current"><a href="javascript:void(0);">全部</a></li>
        <li><a href="javascript:void(0);">等待同意</a></li>
        <li><a href="javascript:void(0);">进行中</a></li>
        <li><a href="javascript:void(0);">已完成</a></li>
        <li><a href="javascript:void(0);">已取消</a></li>
      </ul>
    </div>
    <div class="orderGoods_content" ref="Content">
      
        <ul class="current">
            <li v-for="(item,index) in lists" @click="$router.push('/LineItem')">
              <!-- <h4 class="title_h4">
                <img :src="item.logo" alt="">{{ item.title }}
                <a href="javascript:void(0);">{{ item.title_btn }}</a>
              </h4> -->
              <div class="content_text clearfix">
                <!--<img :src="item.img" alt="">-->
                <div class="contentText_right">
                  <h4>{{ item.contentTitle }} <span class="status">{{item.status}}</span></h4>
                  <p>{{ item.contentData }} {{ item.contentTime }}</p>
                  <div class="clearfix noImg">
                    <div class="univalence_left clearfix">
                    <span>{{ item.univalenceNum }}元/天</span>
                    </div>
                    <!-- <span class="univalence_amount">x{{ item.univalenceAmount }}</span> -->
                  </div>
                </div>
              </div>
              <div class="group_fix">
                <div class="btn_group"><a href="javascript:void(0);">取消订单</a><a href="javascript:void(0);">取消订单</a></div>
                <div class="download_btn">
                  <a href="">下载app</a>
                  <span class="tip">下载app方能操作</span>
                </div>
              </div>
             <!--  <div class="total">
                合计：<span>{{ item.totalNumber }}元</span>
                <button v-show="item.show">{{ item.totalBtn }}</button>
              </div> -->
              <!-- <div class='total'><a href="javascript:void(0);">11{{item.downloadTtext}}</a>
              </div>
              <div class="download clearfix" v-show="item.show"><a href="javascript:void(0);">立即下载</a><span>{{ item.downloadTtext }}</span></div> -->
            </li>
        </ul>
        <ul class="current">
            <li v-for="(item,index) in listagree" @click="$router.push('/LineItem')">
              <div class="content_text clearfix">
                <div class="contentText_right">
                  <h4>{{ item.contentTitle }} <span class="status">{{item.status}}</span></h4>
                  <p>{{ item.contentData }} {{ item.contentTime }}</p>
                  <div class="clearfix noImg">
                    <div class="univalence_left clearfix">
                     <span>{{ item.univalenceNum }}元/天</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="group_fix waitagree">
                <div class="btn_group refuse">
                  <a href="javascript:void(0);">{{item.totalBtn}}</a></div>
                <!-- <div class="download_btn">
                  <a href="">下载app</a>
                  <span class="tip">下载app方能操作</span>
                </div> -->
              </div>
            </li>
        </ul>
        <ul>
            <li v-for="(item,index) in lists" @click="$router.push('/LineItem')">
              进行中...
            </li>
        </ul>
        <ul>
            <li v-for="(item,index) in lists" @click="$router.push('/LineItem')">
              待收款...
            </li>
        </ul>
        <ul>
            <li v-for="(item,index) in lists" @click="$router.push('/LineItem')">
              已完成...
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
  import noData from '../components/noData.vue'
export default {
  name: 'orderGoods',
  components:{noData},
  data () {
    return {
      title_all:10,
      title_underway:2,
      title_agencyFund:4,
      title_ok:8,
      lists:[
        {
            logo:'./static/images/a.jpg',
            title:'美尚股份有限公司',
            title_btn:'等待同意',
            img:'./static/images/1.jpg',
            contentTitle:'高端家政服务时刻的时',
            contentData:'8.28-3.28',
            contentTime:'11:00-17:00',
            univalenceNum:99999,
            univalenceAmount:99,
            totalNumber:120,
            totalBtn:'开工打卡',
            downloadTtext:'下载app方能操作',
            show:true,
            status:"待开工"
        },
        {
          logo:'./static/images/a.jpg',
          title:'美尚股份有限公司',
          title_btn:'等待同意',
          img:'./static/images/1.jpg',
          contentTitle:'高端家政服务',
          contentData:'8.28-3.28',
          contentTime:'11:00-17:00',
          univalenceNum:45,
          univalenceAmount:2,
          totalNumber:120,
          totalBtn:'开工打卡',
          downloadTtext:'下载app方能操作',
          show:false,
          status:"进行中"
        },
        {
          logo:'./static/images/a.jpg',
          title:'美尚股份有限公司',
          title_btn:'等待同意',
          img:'./static/images/1.jpg',
          contentTitle:'高端家政服务',
          contentData:'8.28-3.28',
          contentTime:'11:00-17:00',
          univalenceNum:45,
          univalenceAmount:2,
          totalNumber:120,
          totalBtn:'收工打卡',
          downloadTtext:'下载app方能操作',
          show:true,
          status:'已收款'
        }
      ],
    listagree:[
        {
            logo:'./static/images/a.jpg',
            title:'美尚股份有限公司',
            title_btn:'等待同意',
            img:'./static/images/1.jpg',
            contentTitle:'高端家政服务时刻的时',
            contentData:'8.28-3.28',
            contentTime:'11:00-17:00',
            univalenceNum:99999,
            univalenceAmount:99,
            totalNumber:120,
            totalBtn:'拒绝邀请',
            downloadTtext:'下载app方能操作',
            show:true,
            status:"有人邀请"
        },
        {
          logo:'./static/images/a.jpg',
          title:'美尚股份有限公司',
          title_btn:'等待同意',
          img:'./static/images/1.jpg',
          contentTitle:'高端家政服务',
          contentData:'8.28-3.28',
          contentTime:'11:00-17:00',
          univalenceNum:45,
          univalenceAmount:2,
          totalNumber:120,
          totalBtn:'同意邀请',
          downloadTtext:'下载app方能操作',
          show:false,
          status:"等待同意"
        },
        {
          logo:'./static/images/a.jpg',
          title:'美尚股份有限公司',
          title_btn:'等待同意',
          img:'./static/images/1.jpg',
          contentTitle:'高端家政服务',
          contentData:'8.28-3.28',
          contentTime:'11:00-17:00',
          univalenceNum:45,
          univalenceAmount:2,
          totalNumber:120,
          totalBtn:'取消抢单',
          downloadTtext:'下载app方能操作',
          show:true,
          status:'已拒绝'
        },
        {
          logo:'./static/images/a.jpg',
          title:'美尚股份有限公司',
          title_btn:'等待同意',
          img:'./static/images/1.jpg',
          contentTitle:'高端家政服务',
          contentData:'8.28-3.28',
          contentTime:'11:00-17:00',
          univalenceNum:45,
          univalenceAmount:2,
          totalNumber:120,
          totalBtn:'删除订单',
          downloadTtext:'下载app方能操作',
          show:true,
          status:'已取消'
        }
      ]
    }
  },
  mounted(){
    var tabs = this.$refs.title_tab.children;
    var contents = this.$refs.Content.children;

    for(var i=0;i<tabs.length;i++){
        var tab = tabs[i];
          tab.setAttribute('index',i);
          tab.onclick = function () {
              for(var i=0;i<tabs.length;i++){
                tab = tabs[i];
                tab.removeAttribute('class');
              }
              this.setAttribute('class','current');

              var tabIndex = this.getAttribute('index');
                  for(var i=0;i<contents.length;i++){
                      var content = contents[i];
                      content.removeAttribute('class');
                  }
              content = contents[tabIndex];
              content.setAttribute('class','current');
          }
    }

  },
  methods:{}
}
</script>

<style scoped>
  .orderGoods{background: #f7f7f7;}
  .orderGoods_title{padding:0 3%;background: #fff;position:fixed;top:0;left:0;background: #fff;width:94%;z-index: 999;}
  .orderGoods_title li{width:25%;font-size: 1rem;float: left;text-align: center;}
  .orderGoods_title li span{font-size: .8rem;}
  .orderGoods_title li a{color:#333;display: inline-block;line-height: 3rem;/*border-bottom:2px solid #ffaf23;*/}
  .orderGoods_title li.current a{border-bottom:1px solid #ffaf23;color:#ffaf23;}
  .orderGoods_content{margin-top: 3.6rem;}
  .orderGoods_content ul{display: none;}
  .orderGoods_content ul.current{display:block;}
  .orderGoods_content li{background: #fff;padding:0 1rem;margin-top: .6rem;}
  .title_h4{line-height: 3.2rem;font-size:.9rem;position:relative;border-bottom:1px solid #f2f2f2;}
  .title_h4 img{display: inline-block;width:1.8rem;height:1.8rem;border-radius: 50%;margin-right:2%;vertical-align: middle;}
  .title_h4 a{display: inline-block;color:#ffaf23;position:absolute;top:0;right:0;font-weight: 400;}
  .content_text{padding:1rem 0;border-bottom:1px solid #f2f2f2;font-size:.8rem;}
  .content_text img{width:35%;height:40%;display: inline-block;margin:0 3% 1% 0;float: left;}
  .contentText_right{/*padding-top: 1%;*/position:relative;}
  .contentText_right h4{font-size:.9rem;line-height: 2rem;width:130px;overflow: hidden;height:2rem;}
  .contentText_right p{color:#999;padding-bottom: .3rem;}
  /*.noImg{position:absolute;top:.5rem;right:0;width:132px;}*/
  .noImg .univalence_amount{width:20%;}
  .univalence_left{float:left;overflow: hidden;}
  .univalence_left span,.total span{color:red;}
  .univalence_amount{float:right;width:12%;color:#999;display: inline-block;text-align: right;}
  .total{padding:4% 25% 4% 0;position:relative;}
  .total button{border:1px solid #ddd;color:#999;padding:2% 4%;border-radius: 15px;background: none;position:absolute;top:.5rem;right:0;}
  .download{border-top:1px solid #f2f2f2;padding:.9rem 0;font-size: .9rem;}
  .download span{display: block;width:70%;float: left;color:#999;}
  .download a{display:block;width:30%;float:right;text-align: right;color:#5cbcff;}


/*lhl add css*/
.clearfix.noImg {
    clear: both;
    width: 100%;
    margin-top: 12%;
    font-size: 1rem;
}
.content_text[data-v-09b78974] {
    padding: 1rem 0;
    border-bottom: 1px solid #f2f2f2;
    font-size: .8rem;
    padding-bottom: 2rem;
}
.download a[data-v-09b78974] {
    display: block;
    width: 40%;
    float: right;
    text-align: center;
    color: #fff;
    background: orange;
    height: 30px;
    line-height: 30px;
    border-radius: 50px;
    font-size: 0.9rem;
}

.download.clearfix {
    float: right;
}
.download span[data-v-09b78974] {
    display: block;
    width: 70%;
    float: right;
    color: #999;
}
.btn_group{
      float: left;
}
.btn_group a{
  width: 30%;
    height: 30px;
    line-height: 30px;
    border: 1px solid #eaeaea;
    padding: 4px 10px;
    border-radius: 50px;
    color: #bbb;
    margin-right: 10px;
}
.download_btn{
  float: right;
}
.download_btn a{
   width: 30%;
    height: 30px;
    line-height: 30px;
    border: 1px solid #eaeaea;
    padding: 4px 10px;
    border-radius: 50px;
    color: #bbb;
    margin-right: 10px;
    background: orange;
    color:#fff;
}
.tip{
      display: block;
    color: #ccc;
}
.content_text[data-v-09b78974][data-v-09b78974] {
    padding: 1rem 0;
    border-bottom: 1px solid #f2f2f2;
    font-size: .8rem;
    padding-bottom: 2rem;
    height: 4rem;
}
.group_fix{
  height: 2rem;
    padding-top: 0.8rem;
}
.status{
  float:right;
  font-size: 0.8rem;
  color: orange;
}
.contentText_right h4[data-v-09b78974] {
    font-size: .9rem;
    line-height: 2rem;
    width: 100%;
    overflow: hidden;
    height: 2rem;
}
.orderGoods_title li[data-v-09b78974] {
    width: 20%;
    font-size: 1rem;
    float: left;
    text-align: center;
}
.orderGoods_title li a[data-v-09b78974] {
    display: inline-block;
    line-height: 3rem;
    color: #999;
}
.contentText_right h4[data-v-09b78974][data-v-09b78974] {
    font-size: 1rem;
    line-height: 1.6rem;
    width: 100%;
    overflow: hidden;
    height: 2rem;
    font-weight: 500;
}
.contentText_right p[data-v-09b78974] {
    color: #999;
    padding-bottom: .3rem;
    font-size: 0.88rem;
}
.univalence_left[data-v-09b78974] {
    float: left;
    overflow: hidden;
    margin-top: 0.8rem;
}
.orderGoods_title li.current a[data-v-09b78974] {
    border-bottom: 2px solid #ffaf23;
    color: #ffaf23;
}
.btn_group a[data-v-09b78974] {
    width: 30%;
    height: 30px;
    line-height: 30px;
    border: 1px solid #eaeaea;
    padding: 4px 10px;
    border-radius: 50px;
    color: #bbb;
    margin-right: 10px;
    font-size: 0.8rem;
}
.download_btn a[data-v-09b78974] {
    width: 30%;
    height: 30px;
    line-height: 30px;
    border: 1px solid #eaeaea;
    padding: 4px 10px;
    border-radius: 50px;
    color: #bbb;
    margin-right: 10px;
    background: orange;
    color: #fff;
    font-size: 0.8rem;
}
.group_fix[data-v-09b78974] {
    height: 3.6rem;
    padding-top: 0.8rem;
}
.download_btn[data-v-09b78974] {
    float: right;
    text-align: right;
}
.tip[data-v-09b78974] {
    display: block;
    color: #ccc;
    font-size: 0.86rem;
}
.univalence_left[data-v-09b78974][data-v-09b78974] {
    float: left;
    overflow: hidden;
    margin-top: 0;
}
.btn_group a[data-v-09b78974][data-v-09b78974] {
    height: 30px;
    line-height: 0;
    border: 1px solid #dedede;
    padding: 4px 14px;
    border-radius: 50px;
    color: #bbb;
    margin-right: 10px;
    font-size: 0.86rem;
}
.download_btn a[data-v-09b78974][data-v-09b78974] {
    /* width: 30%; */
    height: 30px;
    line-height: 0;
    border: 1px solid #eaeaea;
    padding: 4px 14px;
    border-radius: 50px;
    color: #bbb;
    margin-right: 10px;
    background: orange;
    color: #fff;
    font-size: 0.86rem;
}
.tip[data-v-09b78974][data-v-09b78974] {
    display: block;
    color: #ccc;
    font-size: 0.86rem;
    margin-top: 0.4rem;
}
.clearfix.noImg[data-v-09b78974] {
    clear: both;
    width: 100%;
    margin-top: 0.2rem;
    font-size: 1rem;
}
.refuse{
float: right;
  color: #333;
}
.btn_group a[data-v-09b78974][data-v-09b78974][data-v-09b78974] {
    height: 30px;
    line-height: 0;
    border: 1px solid #ccc;
    padding: 4px 14px;
    border-radius: 50px;
    color: #666;
    margin-right: 10px;
    font-size: 0.86rem;
}
.waitagree{
    height: 2.4rem;
    padding-top: 0.8rem;
}
</style>

